<template>
    <addEditApprovalTaskView ref="addEditApprovalTaskView"/>
    <addFileView ref="addFileView" />
    <el-main>
        <div class="teacher">
            <div class="app-table">
                <div class="app-body">
                    <div class="app-search">
                        <el-form :inline="true" class="demo-form-inline" v-model="form">
                                        <el-form-item label="报销事由">
                                            <el-input
                                                    placeholder="请输入报销事由"
                                                    v-model="form.title"
                                            ></el-input>
                                        </el-form-item>
                                        <el-form-item label="提交人">
                                            <el-input
                                                    placeholder="请输入提交人姓名"
                                                    v-model="form.submitName"
                                            ></el-input>
                                        </el-form-item>
                                        <el-form-item label="提交人工号">
                                            <el-input
                                                    placeholder="请输入提交人工号"
                                                    v-model="form.submitNumber"
                                            ></el-input>
                                        </el-form-item>
                                       
                            <el-form-item>
                                <el-button plain type="primary" @click="onSubmit"   @keyup.enter="searchEnter">搜索</el-button>
                                <!-- <el-button plain type="success" @click="add">添加</el-button> -->
                                <!-- <el-button plain type="warning" @click="exportExcel">导出报表</el-button> -->
                                <!-- <el-button plain type="danger" @click="importExcel">批量导入<el-icon class="el-icon--right"><Upload /></el-icon></el-button> -->
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table
                            size="small"
                            :data="list"
                            style="width: 100%"
                            border
                            :row-class-name="tableRowClassName"
                    >
                                <el-table-column type="index" label="序号" width="90"/>
                                <el-table-column prop="title" label="报销事由"/>
                                <el-table-column prop="submitName" label="提交人" width="120"/>
                                <el-table-column prop="submitNumber" label="提交人工号" width="120"/>
                                <el-table-column prop="status" label="审批状态" width="120">
                                    <template  #default="scope">
                                        {{scope.row.status==0?'未审批':scope.row.status==1?'审批通过':'已驳回'}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="submitTime" label="提交时间" width="150"/>
                                <!-- <el-table-column prop="type" label="审批类型"/> -->
                        <el-table-column label="操作" width="140px">
                            <template  #default="scope">
                                <el-button
                                        size="small"
                                        type="success"
                                        @click="editApprovalTask(scope.row)"
                                >审批
                                </el-button
                                >
                                <el-button
                                        size="small"
                                        type="danger"
                                        @click="deleteApprovalTask(scope.row.id)"
                                >删除
                                </el-button
                                >
                            </template>
                        </el-table-column>
                        <template v-slot:empty>
                            <el-empty description="暂无数据"></el-empty>
                        </template>
                    </el-table>
                    <el-config-provider :locale="locale">
                        <el-pagination
                                :total="total"
                                :page-size="limit"
                                :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                                layout="total, sizes, prev, pager, next, jumper"
                                @size-change="changePageSize"
                                @current-change="changeCurrentPage"
                        >
                        </el-pagination>
                    </el-config-provider>
                </div>
                <bottomView></bottomView>

            </div>
        </div>
    </el-main>
</template>
<script>
import bottomView from "@/components/bottom.vue";

    import addEditApprovalTaskView from "@/components/invoice/addEditApprovalTask.vue";
    import addFileView from "@/components/addExcelFile.vue";
    import {ElConfigProvider, ElMessageBox, ElMessage} from "element-plus";
    import zhCn from "element-plus/lib/locale/lang/zh-cn";
    import {httpService} from "@/utils/httpService";
    import {Picture as IconPicture,Upload } from "@element-plus/icons-vue";

    export default {
        name: "ApprovalTaskListView",
        data() {
            return {
                type: 0,
                title: "",
                page: 0,
                pageSize: 10,
                total: 0,
                limit: 10,
                list: [],
                form: {
                    title: "",
                    submitNumber: "",
                    submitName: "",
                },
            };
        },
        components: {bottomView,
            addEditApprovalTaskView,
            addFileView,
            IconPicture,
            ElConfigProvider,
            ElMessageBox,
            ElMessage,Upload
        },
        setup() {
            return {
                locale: zhCn,
            };
        },
        mounted() {
            this.getApprovalTaskList();
        },
        watch: {
            $route() {
                this.getApprovalTaskList();
            },
        },
        methods: {
            searchEnter: function (e) {
                // 使用 which 和 keyCode 属性来解决兼容问题
                var keyCode = window.event ? e.keyCode : e.which;
                var val = e.target.value;
                if (keyCode == 13 && val) {
                    this.getApprovalTaskList();
                }
            },
            add() {
                this.$refs.addEditApprovalTaskView.title = "添加账目任务"
                this.$refs.addEditApprovalTaskView.personnelType = this.type
                this.$refs.addEditApprovalTaskView.dialogFormVisible = true;
            },
            editApprovalTask(obj) {
                this.$refs.addEditApprovalTaskView.title = "发票审批"
                this.$refs.addEditApprovalTaskView.getApprovalTaskById(obj.id,obj.title);
                this.$refs.addEditApprovalTaskView.dialogFormVisible = true;
            },
            deleteApprovalTask(id) {
                ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        httpService("/javaApi/approvalTask/deleteById", "id=" + id, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("删除成功");
                                    this.getApprovalTaskList();
                                } else {
                                    ElMessage.error("删除失败，请重试！");
                                }
                            }
                        );
                    })
                    .catch(() => {
                    });
            },
            reloadData(){
                this.page=1;
                this.getApprovalTaskList()
            },
            importExcel() {
                this.$refs.addFileView.dialogFormVisible = true;
                this.$refs.addFileView.title = "批量导入账目任务";
                this.$refs.addFileView.uploadApiUrl = "/javaApi/approvalTask/importExcel";
            },
            exportExcel() {
                httpService(
                    "/javaApi/approvalTask/exportExcel",
                    {
                        "title": this.form.title,
                        "submitNumber": this.form.submitNumber,
                        "submitName": this.form.submitName,
                    },
                    "get"
                ).then((data) => {
                    if (data.code == 200) {
                        window.open(data.msg, '_blank')
                    }
                });
            },
            onSubmit() {
                this.getApprovalTaskList();
            },
            // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
            changePageSize(size) {
                this.pageSize = size;
                this.limit = size;
                this.getApprovalTaskList();
            },

            // 改变页码，page：回调参数，表示当前选中的“页码”
            changeCurrentPage(page) {
                this.page = page;
                this.getApprovalTaskList();
            },
            tableRowClassName({row, rowIndex}) {
                return "";
            },
            getApprovalTaskList() {
                httpService(
                    "/javaApi/approvalTask/listBack/" + this.page + "/" + this.pageSize,
                    {
                        "title": this.form.title,
                        "submitNumber": this.form.submitNumber,
                        "submitName": this.form.submitName,
                    },
                    "get"
                ).then((data) => {
                    this.list = data.list;
                    this.total = data.total;
                    this.pageCount = data.pages;
                });
            },
        },
    };
</script>
<style scoped>
    .el-main {
        padding: 0px;
    }

    .teacher-content {
        width: 100%;
    }

    .app-table {
        background: #eff3f5;
        padding: 10px;
    }

    .app-search {
        /* padding-top: 20px; */
    }

    .app-separator {
        padding-top: 10px;
        padding-bottom: 20px;
        padding-left: 10px;
    }

    .app-body {
        min-height: calc(100vh - 204px);

        background: white;
        padding: 20px 20px 10px 20px;
        margin-bottom: 10px;
    }

    .el-table .warning-row {
        --el-table-tr-bg-color: var(--el-color-warning-lighter);
    }

    .el-table .success-row {
        --el-table-tr-bg-color: var(--el-color-success-lighter);
    }

    .el-pagination {
        text-align: center;
        margin-top: 10px;
    }
</style>

